<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .screen {
            width: 100vw;
            height: 100vh;
            background-color: antiquewhite;
            position: relative;
        }


        .main {
            width: 1920px;
            height: 1080px;
            background-color: aqua;

            /* 先往下一半,缩放基点左上角，不能中间，不然撑开了 ,默认中心点*/
            transform-origin: left top;
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .top {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .bottom {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <div class="screen">
        <div class="main" id="main">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </div>

    <script>
        // 思路
        // 1. 设置外层容器占满屏幕
        // 2. 布局容器设置样式宽高为成设计稿宽高
        // 3. 布局容器设置样式 transform-origin:left top; 设置缩放点在左上角
        // 4. 布局容器设置样式让缩放点处于外层容器中心，可通过定位方式  position: absolute;left: 50%;top: 50%;
        // 5. 写计算缩放大小方法，通过获取屏幕宽高和设计稿宽高比得出比值，返回小的那个
        // 6. 动态设置布局容器缩放，先缩放后平移拉回去
        // 7.监听屏幕尺寸变化，重新进行第六步设置缩放

        // 设计稿宽高
        const designW = 1920
        const designH = 1080

        // 布局区域
        let main = document.getElementById('main')

        // 首次设置
        setStyle()

        // // 窗口变化重新设置
        window.onresize = function () {
            setStyle()

        }


        function setStyle() {
            const scale = getScale()
            console.log('[ scare ] >', scale)
            // 先缩放再平移
            main.style.cssText = `transform:scale(${scale}) translate(-50%,-50%);`
        }

        // 获取缩放比率
        function getScale() {
            const ww = window.innerWidth
            const wh = window.innerHeight
            const wpi = ww / designW
            console.log('%c1.scale方案.html line:99 wpi', 'color: #007acc;', wpi);
            console.log('%c1.scale方案.html line:101 window.innerWidth', 'color: #007acc;', window.innerWidth);
            console.log('%c1.scale方案.html line:102 window.innerWidth', 'color: #007acc;', window.innerWidth);
            
            const hpi = wh / designH
                        console.log('%c1.scale方案.html line:100 hpi', 'color: #007acc;', hpi);

            // wpi < hpi 情况,ww变小或者wh变大
            // wpi> hpi 情况,ww变大或者wh变小
            return wpi < hpi ? wpi : hpi
        }
    </script>
</body>

</html>